<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>今日数据</span>
        <i>{{ currentDate }}</i>
        <router-link to="/statistics">详细数据</router-link>
      </div>
    </template>
    <el-row :gutter="20" class="overview-box">
      <el-col :xs="12" :sm="8" :md="4" class="data-item">
        <p class="tit">营业额</p>
        <p class="num">¥ {{ overviewData.turnover?.toFixed(2) || '0.00' }}</p>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" class="data-item">
        <p class="tit">有效订单</p>
        <p class="num">{{ overviewData.validOrderCount || 0 }}</p>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" class="data-item">
        <p class="tit">订单完成率</p>
        <p class="num">{{ Math.round((overviewData.orderCompletionRate || 0) * 100) }}%</p>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" class="data-item">
        <p class="tit">平均客单价</p>
        <p class="num">¥ {{ overviewData.unitPrice?.toFixed(2) || '0.00' }}</p>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" class="data-item">
        <p class="tit">新增用户</p>
        <p class="num">{{ overviewData.newUsers || 0 }}</p>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义接口类型，确保 props 的类型安全
interface IBusinessData {
  turnover?: number;
  validOrderCount?: number;
  orderCompletionRate?: number;
  unitPrice?: number;
  newUsers?: number;
}

// 定义 props，并设置默认值为空对象，防止初始渲染时 undefined
withDefaults(defineProps<{
  overviewData: IBusinessData
}>(), {
  overviewData: () => ({})
});

// 获取 "YYYY-MM-DD" 格式的当前日期
const getFormattedDate = () => new Date().toISOString().split('T')[0];
const currentDate = ref(getFormattedDate());
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  width: 100%;
  span:first-child {
    font-size: 16px;
    font-weight: 600;
  }
  i {
    font-style: normal;
    font-size: 14px;
    color: #999;
    margin-left: 10px;
    margin-right: auto;
  }
  a {
    font-size: 14px;
    color: #409eff;
    text-decoration: none;
  }
}

.overview-box {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.data-item {
  margin-bottom: 10px;
  .tit {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  .num {
    font-size: 24px;
    font-weight: bold;
  }
}
</style>
